<div>

    <h2>Application Metrics</h2>

    <h3>JVM Metrics</h3>

    <div class="row">
        <div class="col-md-4">
            <b>Memory</b>

            <p>{{'Total Memory' }} ({{metrics.gauges['jvm.memory.total.used'].value / 1000000 | number:0}}M
                / {{metrics.gauges['jvm.memory.total.max'].value / 1000000 | number:0}}M)</p>

            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-success" role="progressbar"
                     aria-valuenow="{{metrics.gauges['jvm.memory.total.used'].value / 1000000 | number:0}}"
                     aria-valuemin="0"
                     aria-valuemax="{{metrics.gauges['jvm.memory.total.max'].value / 1000000 | number:0}}"
                     ng-style="{width: (metrics.gauges['jvm.memory.total.used'].value * 100 / metrics.gauges['jvm.memory.total.max'].value | number:0) + '%'}">
                    {{metrics.gauges['jvm.memory.total.used'].value * 100 / metrics.gauges['jvm.memory.total.max'].value
                    | number:0}}%
                </div>
            </div>
            <p>{{'Heap Memory' }} ({{metrics.gauges['jvm.memory.heap.used'].value / 1000000 | number:0}}M /
                {{metrics.gauges['jvm.memory.heap.max'].value / 1000000 | number:0}}M)</p>

            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-success" role="progressbar"
                     aria-valuenow="{{metrics.gauges['jvm.memory.heap.used'].value / 1000000 | number:0}}"
                     aria-valuemin="0"
                     aria-valuemax="{{metrics.gauges['jvm.memory.heap.max'].value / 1000000 | number:0}}"
                     ng-style="{width: (metrics.gauges['jvm.memory.heap.usage'].value * 100 | number:0) + '%'}">
                    {{(metrics.gauges['jvm.memory.heap.usage'].value * 100 | number:0)}}%
                </div>
            </div>
            <p>{{'Non-Heap Memory' }} ({{metrics.gauges['jvm.memory.non-heap.used'].value / 1000000 |
                number:0}}M / {{metrics.gauges['jvm.memory.non-heap.committed'].value / 1000000 | number:0}}M)</p>

            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-success" role="progressbar"
                     aria-valuenow="{{metrics.gauges['jvm.memory.non-heap.used'].value / 1000000 | number:0}}"
                     aria-valuemin="0"
                     aria-valuemax="{{metrics.gauges['jvm.memory.non-heap.committed'].value / 1000000 | number:0}}"
                     ng-style="{width: (metrics.gauges['jvm.memory.non-heap.committed'].value / 1000000 | number:0) + '%'}">
                    {{(metrics.gauges['jvm.memory.non-heap.used'].value * 100 /
                    metrics.gauges['jvm.memory.non-heap.committed'].value | number:0)}}%
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <b>Threads</b> (Total: {{metrics.gauges['jvm.threads.count'].value}})

            <p>{{'Runnable' }} {{metrics.gauges['jvm.threads.runnable.count'].value}}</p>

            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-success" role="progressbar"
                     aria-valuenow="{{metrics.gauges['jvm.threads.runnable.count'].value}}"
                     aria-valuemin="0"
                     aria-valuemax="{{metrics.gauges['jvm.threads.count'].value}}"
                     ng-style="{width: (metrics.gauges['jvm.threads.runnable.count'].value * 100 / metrics.gauges['jvm.threads.count'].value | number:0) + '%'}">
                    {{metrics.gauges['jvm.threads.runnable.count'].value * 100 /
                    metrics.gauges['jvm.threads.count'].value | number:0}}%
                </div>
            </div>
            <p>{{'Timed waiting ' }} ({{metrics.gauges['jvm.threads.timed_waiting.count'].value}})</p>

            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-warning" role="progressbar"
                     aria-valuenow="{{metrics.gauges['jvm.threads.timed_waiting.count'].value}}"
                     aria-valuemin="0"
                     aria-valuemax="{{metrics.gauges['jvm.threads.count'].value}}"
                     ng-style="{width: (metrics.gauges['jvm.threads.timed_waiting.count'].value * 100 / metrics.gauges['jvm.threads.count'].value | number:0) + '%'}">
                    {{metrics.gauges['jvm.threads.timed_waiting.count'].value * 100 /
                    metrics.gauges['jvm.threads.count'].value | number:0}}%
                </div>
            </div>
            <p>{{'Waiting' }} ({{metrics.gauges['jvm.threads.waiting.count'].value}})</p>

            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-warning" role="progressbar"
                     aria-valuenow="{{metrics.gauges['jvm.threads.waiting.count'].value}}"
                     aria-valuemin="0"
                     aria-valuemax="{{metrics.gauges['jvm.threads.count'].value}}"
                     ng-style="{width: (metrics.gauges['jvm.threads.waiting.count'].value * 100 / metrics.gauges['jvm.threads.count'].value | number:0) + '%'}">
                    {{metrics.gauges['jvm.threads.waiting.count'].value * 100 /
                    metrics.gauges['jvm.threads.count'].value | number:0}}%
                </div>
            </div>
            <p>{{'Blocked' }} ({{metrics.gauges['jvm.threads.blocked.count'].value}})</p>

            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-danger" role="progressbar"
                     aria-valuenow="{{metrics.gauges['jvm.threads.blocked.count'].value}}"
                     aria-valuemin="0"
                     aria-valuemax="{{metrics.gauges['jvm.threads.count'].value}}"
                     ng-style="{width: (metrics.gauges['jvm.threads.blocked.count'].value * 100 / metrics.gauges['jvm.threads.count'].value | number:0) + '%'}">
                    {{metrics.gauges['jvm.threads.blocked.count'].value * 100 /
                    metrics.gauges['jvm.threads.count'].value | number:0}}%
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <b>Garbage collections</b>

            <div class="row">
                <div class="col-md-9">Mark Sweep count</div>
                <div class="col-md-3 text-right">{{metrics.gauges['jvm.garbage.PS-MarkSweep.count'].value}}</div>
            </div>
            <div class="row">
                <div class="col-md-9">Mark Sweep time</div>
                <div class="col-md-3 text-right">{{metrics.gauges['jvm.garbage.PS-MarkSweep.time'].value}}ms</div>
            </div>
            <div class="row">
                <div class="col-md-9">Scavenge count</div>
                <div class="col-md-3 text-right">{{metrics.gauges['jvm.garbage.PS-Scavenge.count'].value}}</div>
            </div>
            <div class="row">
                <div class="col-md-9">Scavenge time</div>
                <div class="col-md-3 text-right">{{metrics.gauges['jvm.garbage.PS-Scavenge.time'].value}}ms</div>
            </div>
        </div>
    </div>
    <div class="well well-lg" ng-show="updatingMetrics">Updating...</div>

    <h3>HTTP requests (events per second)</h3>

    <p>{{'Active requests' }} <b>{{metrics.counters['com.codahale.metrics.servlet.InstrumentedFilter.activeRequests'].count
        | number:0}}</b> - {{'Total requests' }} <b>{{metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count
        | number:0}}</b></p>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Code</th>
                <th>Count</th>
                <th class="text-right">Mean</th>
                <th class="text-right">{{'Average' }} (1 min)</th>
                <th class="text-right">{{'Average' }} (5 min)</th>
                <th class="text-right">{{'Average' }} (15 min)</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>OK</td>
                <td>
                    <div class="progress progress-striped">
                        <div class="progress-bar progress-bar-success" role="progressbar"
                             aria-valuenow="{{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].count * 100 / metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count}}"
                             aria-valuemin="0"
                             aria-valuemax="{{metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count}}"
                             ng-style="{width: ((metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].count * 100 / metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count) | number:0) + '%'}">
                            {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].count}}
                        </div>
                    </div>
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].mean_rate |
                    number:2}}
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].m1_rate |
                    number:2}}
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].m5_rate |
                    number:2}}
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.ok'].m15_rate |
                    number:2}}
                </td>
            </tr>
            <tr>
                <td>Not Found</td>
                <td>
                    <div class="progress progress-striped">
                        <div class="progress-bar progress-bar-warning" role="progressbar"
                             aria-valuenow="{{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].count * 100 / metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count}}"
                             aria-valuemin="0"
                             aria-valuemax="{{metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count}}"
                             ng-style="{width: ((metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].count * 100 / metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count) | number:0) + '%'}">
                            {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].count}}
                        </div>
                    </div>
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].mean_rate
                    | number:2}}
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].m1_rate |
                    number:2}}
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].m5_rate |
                    number:2}}
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.notFound'].m15_rate
                    | number:2}}
                </td>
            </tr>
            <tr>
                <td>Server error</td>
                <td>
                    <div class="progress progress-striped">
                        <div class="progress-bar progress-bar-danger" role="progressbar"
                             aria-valuenow="{{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].count * 100 / metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count}}"
                             aria-valuemin="0"
                             aria-valuemax="{{metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count}}"
                             ng-style="{width: ((metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].count * 100 / metrics.timers['com.codahale.metrics.servlet.InstrumentedFilter.requests'].count) | number:0) + '%'}">
                            {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].count}}
                        </div>
                    </div>
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].mean_rate
                    | number:2}}
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].m1_rate
                    | number:2}}
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].m5_rate
                    | number:2}}
                </td>
                <td class="text-right">
                    {{metrics.meters['com.codahale.metrics.servlet.InstrumentedFilter.responseCodes.serverError'].m15_rate
                    | number:2}}
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <h3>Services statistics (time in millisecond)</h3>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Service name</th>
                <th class="text-right">Count</th>
                <th class="text-right">Mean</th>
                <th class="text-right">Min</th>
                <th class="text-right">p50</th>
                <th class="text-right">p75</th>
                <th class="text-right">p95</th>
                <th class="text-right">p99</th>
                <th class="text-right">Max</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="(k, v) in servicesStats">
                <td>{{k}}</td>
                <td class="text-right">{{v.count}}</td>
                <td class="text-right">{{v.mean * 1000 | number:0}}</td>
                <td class="text-right">{{v.min * 1000 | number:0}}</td>
                <td class="text-right">{{v.p50 * 1000 | number:0}}</td>
                <td class="text-right">{{v.p75 * 1000 | number:0}}</td>
                <td class="text-right">{{v.p95 * 1000 | number:0}}</td>
                <td class="text-right">{{v.p99 * 1000 | number:0}}</td>
                <td class="text-right">{{v.max * 1000 | number:0}}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <h3>Ehcache statistics</h3>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Cache name</th>
                <th class="text-right">Objects</th>
                <th class="text-right">Hits</th>
                <th class="text-right">Misses</th>
                <th class="text-right">Eviction count</th>
                <th class="text-right">Mean get time (ms)</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="(k, v) in cachesStats" ng-once>
                <td>{{v.name}}</td>
                <td class="text-right">{{metrics.gauges[k + '.objects'].value}}</td>
                <td class="text-right">{{metrics.gauges[k + '.hits'].value}}</td>
                <td class="text-right">{{metrics.gauges[k + '.misses'].value}}</td>
                <td class="text-right">{{metrics.gauges[k + '.eviction-count'].value}}</td>
                <td class="text-right">{{metrics.gauges[k + '.mean-get-time'].value | number:2}}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <h3 ng-show="metrics.gauges['HikariPool-0.pool.TotalConnections'].value > 0">DataSource statistics</h3>

    <div class="table-responsive" ng-show="metrics.gauges['HikariPool-0.pool.TotalConnections'].value > 0">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>{{'metrics.datasource.usage' }} ({{metrics.gauges['HikariPool-0.pool.ActiveConnections'].value}} /
                    {{metrics.gauges['HikariPool-0.pool.TotalConnections'].value}})
                </th>
                <th class="text-right">{{'metrics.datasource.count' }}</th>
                <th class="text-right">{{'metrics.datasource.mean' }}</th>
                <th class="text-right">{{'metrics.datasource.min' }}</th>
                <th class="text-right">{{'metrics.datasource.p50' }}</th>
                <th class="text-right">{{'metrics.datasource.p75' }}</th>
                <th class="text-right">{{'metrics.datasource.p95' }}</th>
                <th class="text-right">{{'metrics.datasource.p99' }}</th>
                <th class="text-right">{{'metrics.datasource.max' }}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <div class="progress progress-striped">
                        <div class="progress-bar progress-bar-success" role="progressbar"
                             aria-valuenow="{{metrics.gauges['HikariPool-0.pool.ActiveConnections'].value | number:0}}"
                             aria-valuemin="0"
                             aria-valuemax="{{metrics.gauges['HikariPool-0.pool.TotalConnections'].value | number:0}}"
                             ng-style="{width: (metrics.gauges['HikariPool-0.pool.ActiveConnections'].value * 100 / metrics.gauges['HikariPool-0.pool.TotalConnections'].value | number:0) + '%'}">
                            {{metrics.gauges['HikariPool-0.pool.ActiveConnections'].value * 100 /
                            metrics.gauges['HikariPool-0.pool.TotalConnections'].value | number:0}}%
                        </div>
                    </div>
                </td>
                <td class="text-right">{{metrics.histograms['HikariPool-0.pool.Usage'].count}}</td>
                <td class="text-right">{{metrics.histograms['HikariPool-0.pool.Usage'].mean | number:2}}</td>
                <td class="text-right">{{metrics.histograms['HikariPool-0.pool.Usage'].min | number:2}}</td>
                <td class="text-right">{{metrics.histograms['HikariPool-0.pool.Usage'].p50 | number:2}}</td>
                <td class="text-right">{{metrics.histograms['HikariPool-0.pool.Usage'].p75 | number:2}}</td>
                <td class="text-right">{{metrics.histograms['HikariPool-0.pool.Usage'].p95 | number:2}}</td>
                <td class="text-right">{{metrics.histograms['HikariPool-0.pool.Usage'].p99 | number:2}}</td>
                <td class="text-right">{{metrics.histograms['HikariPool-0.pool.Usage'].max | number:2}}</td>
            </tr>
            </tbody>
        </table>
    </div>

</div>
